<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no" />
    <title>添加银行卡</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css"/>
    <style>
        body{
            background: #f3f3f3;
            font-size: 14px;
            width: 100%;
            overflow: hidden;
        }
        .aui-icon-left{
            padding-left:10px;
        }

        .aui-slide-page-active{
            background: #327afa;
        }
/*        header {
            width: 100%;
            height: 45px;
            background: #fff;
            position: relative;
            z-index: 9;
        }
        .win_title{
            text-align: center;
            width: 100%;
            line-height: 45px;
            height: 45px;
            font-size: 16px;
        }*/
        .aui-iconfont{
            position: absolute;
        }
        .aui-list-view:after{
            border:none;
        }
        .aui-pull-right{
            margin-right:20px;
        }
        .cancel{
            background: #d7e5ff;
            border-color: #d7e5ff;
            color: #327afa;
            width: 50%;
            float: left;
        }
        .confirm{
            width: 50%;
            float: left;
        }
        input.inputCardNo,input.inputName,input.inputNo{
            line-height: 25px;
            margin: 0;
            width: inherit;
            padding: 0;
            border: 0;
            width: 80%;
        }
        .myBtn{
            /* position: fixed;
             bottom: 0;*/
            width: 90%;
            margin: 0 auto;
        }
        .myBtn.disable{
            background: #d9d9d9;
            color: #bababa;
        }
        .contain{
            width: 100%;
            transition: .5s;
        }
        .writeCardNo,.writeCardInfo{
            width: 100%;
            float: left;
        }
        .
        .fuwu input[type="checkbox"]{
            vertical-align:middle;
            margin-right: 5px;
        }
    </style>
</head>
<body>
<!-- <header class="myBorder">
    <div class="win_title aui-border-b headerCardNo">
        <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeWin()"></div>
        <div class="">
            添加银行卡
        </div>
    </div>
    <div class="win_title aui-border-b headerCardInfo">
        <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="showCardInfoBack()"></div>
        <div class="">
            填写银行卡信息
        </div>
    </div>
</header> -->
<header class="aui-bar aui-bar-nav aui-border-b headerCardNo">
  <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeWin()"></div>
  <div class="aui-title">添加银行卡</div>
</header>

<div class="contain">
    <div class="writeCardNo">
        <ul class="aui-list-view">
            <li class="aui-list-view-cell" >
                <span>卡号</span>
                <input type="text"  name="" placeholder="银行卡号" onpropertychange="checkCard(this)" oninput="checkCard(this)" class="inputCardNo" name="" value="55555555555555555">
            </li>
        </ul>
        <div class="myBtn disable btnCardNo" tapmode >下一步</div>
    </div>
</div>
<!-- 控制影藏显示 -->

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/index.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
<script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
<script type="text/javascript">
    apiready = function() {
        api.parseTapmode();
        var mobile = api.pageParam.mobile;
        var header = $api.dom('header');
        var footer = $api.dom('footer');
        
        $api.fixIos7Bar(header);
    }
    function checkCard(obj){
        // 四位数一个空格
        var cardNo=$(obj).val().replace(/\D/g,"").replace(/(\d{4})(?=\d)/g,"$1 ");
        var cardNoShort=$(obj).val().replace(/\s/g,"");//没有空格的
        $(".inputCardNo").val(cardNo);
        if((cardNoShort.length>=18)&&(cardNoShort.length<21)){
            $(".btnCardNo").removeClass("disable");
            $(".btnCardNo").attr({"onclick":"next()"});
        }else if(cardNoShort.length>=21){
            $(".inputCardNo").val(cardNoShort.substr(0,21).replace(/(\d{4})(?=\d)/g,"$1 "));
        }else{
            $(".btnCardNo").addClass("disable");
            $(".btnCardNo").removeAttr("onclick");
        }
    }

    var isName=false,isNo=false,isPhone=false;
    function send(){
        alert("已提交，等待审核")
    }
    function checkAll(){
        if(isName && isNo && isPhone){
            $(".checkBtn").removeClass("disable");
            $(".checkBtn").attr({"onclick":"CardInfoNext()"});
        }else{
            $(".checkBtn").addClass("disable");
            $(".checkBtn").removeAttr("onclick");

        }
    }
    function next(){
        api.openWin({
            name:"addCardInfo",
            url:"addCardInfo.html"
        })
    }
    function showCardInfoBack(){
        $(".contain").removeClass("showCardInfo");
        $(".headerCardNo").css({"display":"block"});
        $(".headerCardInfo").css({"display":"none"});
    }
    function CardInfoNext(){
        if($("#agree").prop("checked")){
            alert("已同意服务")
        }else{
            alert("请同意服务")
        }
    }
</script>
</html>
